<template>
  <div class="container">
    <!-- 顶部 -->
    <van-nav-bar title="虫洞">
      <template #right>
        <van-icon name="share-o" size="18" />
      </template>
      <template #left>
        <router-link to="/">
          <van-icon name="arrow-left" size="18" />
        </router-link>
      </template>
    </van-nav-bar>
    <!-- 广告 -->
    <van-image :style="w" src="three_pic/one.jpg" />
    <!-- 正文 -->
    <div class="cont">
      <div class="contItem">
        <div class="contItem-header">
          <h4>保存开放的心态</h4>
          <p>陈仲凯兔兔</p>
        </div>
        <div class="contImg" :style="w">
          <img src="/collect/7.jpg" />
        </div>
      </div>
    
      <div class="contItem">
        <div class="conItem-hader">
          <h4>暑假云学习 打卡挑战开始</h4>
          <p>爱吃鱼的猫</p>
        </div>
        <div class="contImg" :style="w">
          <img src="/collect/5.jpg" alt="" />
        </div>
      </div>
      <br>
      <div class="contItem">
        <h4>这届奥运会看的我五味杂陈</h4>
        <p>夏天的向日葵</p>
      </div>
      <div class="contImg" :style="w">
        <img src="/collect/6.jpg" alt="" />
      </div>
      <div></div>
    </div>
    <!-- 底部选项卡 -->
     <mt-tabbar v-model="selected" fixed>
      <mt-tab-item id="hand_pick">
        <img
          v-if="selected == 'hand_pick'"
          src="../assets/tabbar_pic/hand_pick1.png"
          slot="icon"
          alt=""
        />
        <img
          v-else
          src="../assets/tabbar_pic/hand_pick.png"
          slot="icon"
          alt=""
        />
        精选</mt-tab-item
      >
      <mt-tab-item id="my_courses">
        <img
          v-if="selected == 'my_courses'"
          src="../assets/tabbar_pic/my_courses1.png"
          slot="icon"
          alt=""
        />
        <img
          v-else
          src="../assets/tabbar_pic/my_courses.png"
          slot="icon"
          alt=""
        />
        我的课程</mt-tab-item
      >

      <mt-tab-item id="cdong">
        <img
          v-if="selected == 'cdong'"
          src="../assets/tabbar_pic/cdong3.png"
          slot="icon"
          alt=""
        />
        <img v-else src="../assets/tabbar_pic/cdong2.png" slot="icon" alt="" />
        虫洞</mt-tab-item
      >

      <mt-tab-item id="personal_center">
        <img
          v-if="selected == 'personal_center'"
          src="../assets/tabbar_pic/personal_center1.png"
          slot="icon"
          alt=""
        />
        <img
          v-else
          src="../assets/tabbar_pic/personal_center.png"
          slot="icon"
          alt=""
        />
        个人中心</mt-tab-item
      >
    </mt-tabbar>
  </div>
</template>
<script>
export default {
  data() {
    return {
      selected: "cdong",
      w: "",
      zix:'zix',
      islogin: sessionStorage.islogin,
    };
  },
    watch: {
    selected(newval) {
      if (newval == "hand_pick") {
        this.$router.push("/"); //  路径 / 映射到Index.vue
      } else if (newval == "personal_center") {
        this.$router.push("/WeiPersonal"); // 路径 /Personal 映射到Personal.vue
      } else if (newval == "cdong") {
        this.$router.push("/cdong");
      } else if (newval == "my_courses") {
        if(!this.islogin){
          this.$router.push("/login")
        }else {
          this.$router.push("/myClass");
        }
      }
    },
  },
};
</script>
<style scoped>
.contImg img {
  width:40%;
}
</style>